<!DOCTYPE html>
<html lang="en">
<head th:replace="/admin/_backend-fragments :: backend-head-template"><title></title></head>
<body>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>
<script src="../../static/lib/editor-md/editormd.min.js"></script>

<!-- 导航 nav -->
<nav th:replace="/admin/_backend-fragments :: backend-nav-menu-template"></nav>
<div th:replace="/admin/_backend-fragments :: backend-nav-secondary-menu-template(2)"></div>

<!--中间内容 div-->
<div class="ui custom-padded-tb-small container">
  <div class="ui basic segment">
    <form action="#" method="post" class="ui large form">

      <!-- 输入文章标题 -->
      <div class="required field">
        <div class="ui large left icon input">
          <i class="file alternate icon"></i>
          <input type="text" name="title" placeholder="文章标题">
        </div>
      </div>

      <!-- 博客正文书写区域 -->
      <div class="required field" style="z-index: 1 !important;">
        <div id="markdown-content">
          <textarea placeholder="请输入博客内容..." name="content" style="display: none"></textarea>
        </div>

      </div>


      <div class="ui stackable inline fields">
        <!--
        分类单选框
        特性：
        1. 自动下来
       -->


        <div class="field">
          <div class="ui selection dropdown">
            <input type="hidden" name="type">
            <i class="dropdown icon"></i>
            <div class="default text">分类</div>
            <div class="menu">
              <div class="item" data-value="0">分类1</div>
              <div class="item" data-value="1">分类2</div>
              <div class="item" data-value="2">分类3</div>
            </div>
          </div>
        </div>

        <!--
          标签多选框
          特性：
          1. 自动下拉
        -->
        <div class="field">
          <div class="ui fluid multiple search selection dropdown">
            <input type="hidden">
            <i class="dropdown icon"></i>
            <div class="default text">标签</div>
            <div class="menu">
              <div class="item" data-value="1">Java</div>
              <div class="item" data-value="2">Python</div>
              <div class="item" data-value="3">CPP</div>
            </div>
          </div>
        </div>

        <!--
          草稿勾选选项
         -->
        <div class="field">
          <div class="ui checkbox">
            <input type="checkbox" id="draft" name="draft">
            <label for="draft">
              草稿
            </label>
          </div>
          <div class="ui checkbox">
            <input type="checkbox" id="up-to-top" name="draft">
            <label for="up-to-top">
              置顶
            </label>
          </div>
          <div class="ui checkbox">
            <input type="checkbox" id="comment" name="draft">
            <label for="comment">
              评论
            </label>
          </div>
          <div class="ui checkbox">
            <input type="checkbox" id="pay" name="draft">
            <label for="pay">
              赞赏
            </label>
          </div>
        </div>

        <!-- 置顶 -->

        <!-- 评论 -->

        <!-- 赞赏 -->


        <div class="ui very compact right labeled left icon input">
          <i class="image icon"></i>
          <input type="text" placeholder="图片地址">
          <a class="ui tag label">添加图片 </a>
        </div>

      </div>

      <div class="ui right aligned container">
        <div class="right field">
          <div class="ui big buttons">
            <a href="admin-main.html" class="ui button">取消</a>
            <div class="or"></div>
            <a href="#" class="ui positive button">发布</a>
          </div>
        </div>
      </div>


    </form>
  </div>
</div>

<!--
  底部元素 footer
-->

<!--
  JQuery
-->
<script>
  var testEditor;
  $(function() {
    testEditor = editormd({
        id      : "markdown-content",
        width   : "90%",
        height  : 640,
        path    : "../../static/lib/editor-md/lib/",
        //theme: "dark",//工具栏主题
        //previewTheme: "dark",//预览主题
        //editorTheme: "pastel-on-dark",//编辑主题
        placeholder : "享受写博客的乐趣！",
        saveHTMLToTextarea: true,
        emoji: true,
        taskList: true,
        tocm: true,         // Using [TOCM]
        tex: true,                   // 开启科学公式TeX语言支持，默认关闭
        flowChart: true,             // 开启流程图支持，默认关闭
        sequenceDiagram: true,       // 开启时序/序列图支持，默认关闭,
        toolbarIcons : function() {  //自定义工具栏，后面有详细介绍
        return editormd.toolbarModes['full']; // full, simple, mini
        }
    })});

  $('.menu.toggle').on('click', function (){
    $('.click-to-show-nav-menu-list').toggleClass('custom-mobile-hide-menu');
  });

  $('.ui.dropdown').dropdown({
    on: 'hover'
  });

  $('.ui.form').form({
    fields: {
      title: {
        identifier: 'title',
        rules: [{
          type: 'empty',
          prompt: 'Error: 博客文章标题不能为空!',
        }]
      },

      content: {
        identifier: 'content',
        rules: [{
          type: 'empty',
          prompt: 'Error: 博客文章内容不能为空!'
        }]
      }
    }
  });




</script>

</body>
</html>